<template>
  <el-row class="tac">
    <el-col>
      <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" @select="checkMethod">
        <el-menu-item index="match_songlist">
          <i class="el-icon-setting"></i>
          <span slot="title">匹配歌单列表</span>
        </el-menu-item>
        <el-menu-item index="web_songlist">
          <i class="el-icon-setting"></i>
          <span slot="title">WEB歌单列表</span>
        </el-menu-item>
        <el-menu-item index="web_songs">
          <i class="el-icon-setting"></i>
          <span slot="title">WEB歌曲列表</span>
        </el-menu-item>
        <el-menu-item index="web_tag">
          <i class="el-icon-setting"></i>
          <span slot="title">WEB标签列表</span>
        </el-menu-item>
        <el-menu-item index="ult_songs">
          <i class="el-icon-setting"></i>
          <span slot="title">爱听歌曲列表</span>
        </el-menu-item>
        <el-submenu index="task">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>任务管理</span>
          </template>
          <el-menu-item v-for="($val, $idx) in menu" :key="$idx" :index="`api_${$val}`">
            <span>{{$val}}</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
  </el-row>
</template>
<script>
import apis from "@utils/apis";
export default {
  data() {
    return {
      defaultActive: 'match_songlist',
      menu: [],
    }
  },

  mounted() {
    this.$nextTick(function() {
      this.defaultActive = this.$route.name || 'match_songlist'
      // this.$router.push({
      //   name: this.$route.name,
      // })
      apis.taskMenuApi().then(res => {
        this.menu = res.result.docs
        // this.checkMethod(`api_${this.menu[0]}`)
      })
    })
  },

  methods: {
    checkMethod(name, keyPath) {
      let query = {}
      if (/^api_/.test(name)) {
        query.source = name.replace('api_', '')
        name = 'task'
      }
      this.$router.push({
        name,
        query,
      })
    }
  },

}

</script>
<style>


</style>
